<template>
	<view class="cate-scroll">
	
		<!-- 搜索组件 -->
		<search  @toSearch="toSearchPage" disabled=false></search>
		
		<view class="bottem">
			<!-- 一级分类 -->
			<scroll-view scroll-y="true"  class="left-scroll"  :style=" { 'height' :wh+'px'}">
				<view 
					:class="['left-scroll-item',i===active?'active':' ' ] "
					@click="activeHandler(i,item.cat_id)"
					v-for="(item,i) in cateList" 
					:key="item.cat_id">
						{{item.cat_name}} 
				</view>
			</scroll-view>
			
			<scroll-view scroll-y="true" class="right-scroll" :scroll-top="scrollTop" :style=" { 'height' :wh+'px'}">
				<!-- 二级分类 -->
				<view 
					class="right-scroll-item"
					v-for="(item,index) in cateLevel2"
					:key="index">
					<view class="right-scroll-item-title">
						/ {{item.cat_name}} /
					</view>
					<!-- 三级分类 -->
					<view class="right-scroll-item-img" v-if="item.children">
						<view class="" v-for="item in item.children" :key="item.cat_id">
							<navigator :url=" '/subpkg/goods_list/goods_list?cId=' + item.cat_id " hover-class="none">
										<image class="item-img" src="https://img.keaitupian.cn/newupload/08/1629366384624288.jpg" ></image>
										{{item.cat_name}}
							</navigator>
						</view>
					</view>
					<view v-else style="text-align: center; color: #94a3ad;font-size: 28rpx;">
						暂无商品～
					</view>
				</view>
			
				
			</scroll-view>
				
		</view>
		
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabber-badge.js'
	export default {
		mixins:[badgeMix],
		data() {
			return {
				cateList:[],
				cateLevel2:[],
				active:0,
				scrollTop:0, // 滚动条距离顶部的距离
				oldI:0,
				wh:0,
				searchData:''
			}
		},
		onLoad(){
			
			this.getCateList()
			const res = uni.getSystemInfo({
				success:(res=>{
						this.wh = res.windowHeight - 48
				})
			})					

			 console.log('wh',this.wh)
		},
		methods:{
			toSearchPage(disabled){
				if(disabled){
					uni.navigateTo({ url:'/subpkg/search/search' })
				}
			},
			async getCateList(){
				const { data:res } = await uni.$http.get('/api/public/v1/categories')
				if(res.meta.status !== 200) return uni.$showMsg()
				this.cateList = res.message
				this.cateLevel2 = res.message[this.active].children
				this.scrollTop = this.scrollTop ? 0 : 1
				// console.log('cateList',this.cateList)
				// console.log('cateLevel2',this.cateLevel2)
			},
			activeHandler(i,catId){
				if(this.oldI !== i){
					this.getCateList()
					this.active = i
					this.oldI = i
				}
			}
		}
	}
</script>

<style lang="scss">
	.cate-scroll{
		.bottem{
		display: flex;
		.left-scroll{
			background-color: #f7f6f9;
			width: 30%;
			height: 100vh;
			overflow: scroll;
			.left-scroll-item{
				height: 120rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 140rpx;
			}
			.active{
				background-color: white;
				position: relative;
				&::before{
					content: '';
					background-color: #ad2318;
					width: 7rpx;
					height: 70rpx;
					position: absolute;
					left: 0;
					top:50%;
					transform: translateY(-50%);
					border-radius: 3rpx;
				}
			}
		}
		.right-scroll{
			width: 80%;
			height: 100vh;
			.right-scroll-item{
				.right-scroll-item-title{
					font-size: 26rpx;
					text-align: center;
					margin: 40rpx 0 30rpx 0;
				}
				.right-scroll-item-img{
					font-size: 24rpx;
					display: flex;
					flex-wrap: wrap;
					text-align: center;
					.item-img{
						width: 120rpx;
						height: 80rpx;
						margin: 20rpx 30rpx 10rpx 30rpx;
					}
				}
			}
		}
		}
	}
</style>
